<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>TodoList</title>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="inputValue" />
			<button @click="submit">提交</button>
			<ul>
				<todo-list v-bind:content="item" v-bind:aaa="index" v-for="(item,index) in list" @delete='handleItemDelete'></todo-list>
			</ul>
			<p v-if="canSee">you can see me</p>
		</div>
		
		<script src="js/vue.js"></script>
		<script>
			// 全局组件
			/* Vue.component('TodoList',{
				props:['content'],
				template:'<li>{{content}}</li>'
			}) */
			
			// 局部组件
			let TodoList = {
				props:['content','aaa'],
				template:'<li @click="handleItemClick">{{content}}</li>',
				methods:{
					handleItemClick:function(){
						this.$emit('delete',this.aaa)
					}
				}
			}
			
			let app = new Vue({
				el:'#app',
				// 对局部组件进行注册
				components:{//
					TodoList:TodoList
				},
				data:{
					inputValue:'',
					list:[],
					canSee:true
				},
				methods:{
					submit:function(){
						this.list.unshift(this.inputValue);
						this.inputValue = '';
					},
					handleItemDelete:function(index){
						this.list.splice(index,1)
					}
				}
			})
		</script>
	</body>
</html>
